<template>
  <view class="login">
    <view class="title">运维通</view>
    <img src="/static/image/logo.png" class="logo">
    <view class="form">
      <label class="form-row">
        <icon type="success" size="26" />
        <text class="form-row--title">用户名</text>
        <input class="form-row--input" v-model="form.username" type="text" placeholder="请输入用户名">
      </label>
      <label class="form-row">
        <icon type="success" size="26" />
        <text class="form-row--title">密&nbsp;&nbsp;码</text>
        <input class="form-row--input" v-model="form.password" type="text" password placeholder="请输入密码">
      </label>
      <button class="form-btn--submit" @click="login" :disabled='loading' :loading="loading">登&nbsp;&nbsp;录</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '999',
        password: '000000',
        loginType: 'user'
      },
      loading: false
    }
  },
  onLoad() {
    uni.hideTabBar()
  },
  methods: {
    async login() {
      this.loading = true
      await this.$http.post('/login/auth', this.form)
      this.$router.replace('/')
      this.loading = false
    }
  }
}
</script>

<style lang="scss">
.login {
  width: 100vw;
  height: 100vh;
  background: url('/static/image/bg.png') no-repeat;
  background-size: contain;
  text-align: center;
}
.title {
  font-size: 72rpx;
  color: #fff;
  padding-top: 100rpx;
}
.logo {
  margin-top: -50rpx;
  position: relative;
  width: 200rpx;
  height: 200rpx;
  transform: translateY(50%);
  border-radius: 50%;
  border: 20rpx solid #008cff;
  z-index: 1;
}
.form {
  background-color: #fff;
  margin: 0 20rpx;
  padding: 120rpx 20rpx 50rpx 20rpx;
  border-radius: 40rpx;
  position: relative;
  &::after {
    content: '';
    position: absolute;
    bottom: -30rpx;
    left: 5%;
    width: 90%;
    height: 50rpx;
    background-color: #fff;
    opacity: 0.3;
    border-bottom-right-radius: 50rpx;
    border-bottom-left-radius: 50rpx;
  }
  .form-row {
    display: flex;
    align-items: center;
    padding: 20rpx;
    & + .form-row {
      margin: 50rpx 0;
    }

    &--title {
      margin: 0 20rpx;
      letter-spacing: 10rpx;
    }
    &--input {
      flex: 1;
      border-bottom: 1rpx solid #ccc;
      text-align: left;
      padding: 20rpx 0;
      position: relative;
      &:hover {
        border-bottom: 1rpx solid transparent;
        &::after {
          position: absolute;
          content: '';
          height: 1rpx;
          bottom: 0;
          background-color: #068cf4;
          animation: lineAnimat ease-in-out 600ms 1 forwards;
        }
      }
    }
  }

  &-btn--submit {
    width: 70%;
    margin: 0 auto;
    background-color: #068cf4;
    color: #fff;
    &[disabled]:not([type]) {
      background-color: rgba(6, 141, 244, 0.479);
      color: #fff;
    }
  }
}

@keyframes lineAnimat {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
</style>
